<template>
  <a-row justify="space-around" align="middle" class="y-login">
    <div class="y-login-form">
      <div class="y-login-form-title"></div>
      <!-- 表单登录 -->
      <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
        <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '用户名不能为空!' }]">
          <a-input v-model:value="formState.username" />
        </a-form-item>

        <a-form-item label="密码" name="password" :rules="[{ required: true, message: '密码不能为空!' }]">
          <a-input-password v-model:value="formState.password" />
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 16, span: 4 }">
          <a-button type="text" html-type="submit" class="y-login-form-btn">登录</a-button>
        </a-form-item>
        {{testRes}}
      </a-form>
    </div>
  </a-row>
</template>
<script setup>
const router = useRouter()
const formState = reactive({
  username: '',
  password: ''
})

const testRes = ref('')
const onFinish = values => {
  apiWs
    .login({
      name: values.username,
      password: values.password
    })
    .subscribe(resp => {
      andv.message.success('登录成功')
      localStorage.setItem("user", name)
      router.push('/haiying/dashboard')
    })
}

const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo)
}
</script>

<style scoped>
.y-login {
  height: 100%;
  background-image: url('../assets/images/login/body_bg.png');
  background-size: cover;
  background-repeat: no-repeat;
}

.y-login-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 510px;
  height: 264px;
  background-image: url('../assets/images/login/login_bg.png');
  background-size: cover;
  background-repeat: no-repeat;
}

.y-login-form-title {
  width: 510px;
  height: 50px;
  margin-bottom: 10px;
  background-image: url('../assets/images/login/login_title_zh.png');
  background-size: cover;
  background-repeat: no-repeat;
}

.y-login-form-btn {
  width: 80px;
  height: 25px;
  padding: 0;
  border: none;
  background-image: url('../assets/images/login/login_button.png');
  background-size: cover;
  background-repeat: no-repeat;
}

.y-login-form-btn:hover {
  background-color: transparent;
}
</style>